<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
		div{
			width: 500px;
			height: 500px;
			background-color: #00ffff;
			/*背景图属性*/
			background-image: url(../Day03/img/小新.png);
			/*背景图大于空间--背景图尺寸属性：属性值 ①px  %  
			                                      ②contain 等比例缩放图片
												  ③cover 等比例放大图片
			*/
			background-size: 30% 30%;
			/*背景图小于空间--平铺*/
			background-repeat: no-repeat;
			/*背景图小于空间-->背景定位属性,属性值 x% y%  数值px 数值px 英文*/
			background-position: 30% 0%;
			background-position: 100px 0;
			background-position: center center;
		}	
		/* 背景图像固定属性：fixed固定模式-->理解：水印 
		先决条件：1.高度空间足够形成滚动条
		         2.引入背景图滚动模式：①等比例放大图片，覆盖整个容器
				                     ②等比例缩放图片，保证图片全部显示在容器中
		         3.背景图固定属性：background-attachment：fixed固定到页面上
		*/
		body{
			/*高度：100000px 形成滚动条*/
			height: 100000px;
			/* 滚动模式-->背景图如何滚动--属性background-size */
			background-size: cover;
			/*引入图*/
			background-image: url("../Day03/img/小新.png");
			/*水印效果：背景图固定*/
			background-attachment: fixed;
			/*background 背景属性: 背景图片 背景重复 背景定位 背景尺寸 背景固定;
			常用写法：background：背景图片 背景重复；
			*/
		
		}
		</style>
	</head>
	<body>
		Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat voluptas dicta voluptate laboriosam, error accusamus deserunt provident ratione sint natus quia optio consequatur fugit vel aut quae esse! Temporibus, <<iste!lorem>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis labore tempore illo fuga consequuntur incidunt, rerum obcaecati exercitationem, laudantium dolorem aliquid sequi recusandae voluptatem, voluptas quo quod fugiat dolorum quis.</iste!lorem></iste!lorem>
		<div>
		</div>
	</body>
</html>